<!--
 * @Descripttion: 
 * @Author: yuxi
 * @Date: 2022-09-15 14:58:04
 * @LastEditors: yuxi
 * @LastEditTime: 2023-01-10 17:14:32
-->
<template>
  <div class="map-container">
    <MiningMap :center="center" :zoom="zoom">
      <MiningTiandituLayer :ak="key" @ready="ready"></MiningTiandituLayer>
      <MiningVectorLayer :featureStyle="style">
        <MiningLineString :feature="feature"></MiningLineString>
      </MiningVectorLayer>
    </MiningMap>
  </div>
</template>

<script>
import MiningMap from 'mining-map/Map'
import MiningTiandituLayer from 'mining-map/Layers/TiandituLayer'
import MiningVectorLayer from 'mining-map/Layers/VectorLayer'
import MiningLineString from 'mining-map/Features/LineString';
import { TiandituKey,CityCoordinates } from '@/config/config.js';

import Feature from 'ol/Feature';
import LineString from 'ol/geom/LineString';
import { Style, Stroke as StrokeStyle } from 'ol/style';

export default {
  name: 'FeatureLineString',
  title: 'LineString',
  parentTitle: 'Feature',
  components: {
    MiningMap,
    MiningTiandituLayer,
    MiningVectorLayer,
    MiningLineString
  },
  data () {
    const feature = new Feature({
      geometry: new LineString([
        CityCoordinates.BeiJing,
        CityCoordinates.TianJin,
        CityCoordinates.ShangHai,
        CityCoordinates.XiAn
      ]),
      name: 'AirLine',
    });
    const style = new Style({
      stroke: new StrokeStyle({
        color: 'green',
        width: 1,
      }),
    })
    return {
      feature,
      style,
      center: [117.730311, 35.698681],
      zoom: 5,
      key: TiandituKey,
    }
  },
  methods: {
    ready (arg) {
      console.log(arg)
      // const styles = {
      //   'LineString': new Style({
      //     stroke: new StrokeStyle({
      //       color: 'green',
      //       width: 1,
      //     }),
      //   }),
      //   'MultiLineString': new Style({
      //     stroke: new StrokeStyle({
      //       color: 'green',
      //       width: 1,
      //     }),
      //   }),
      //   'MultiPolygon': new Style({
      //     stroke: new StrokeStyle({
      //       color: 'yellow',
      //       width: 1,
      //     }),
      //     fill: new FillStyle({
      //       color: 'rgba(255, 255, 0, 0.1)',
      //     }),
      //   }),
      //   'Polygon': new Style({
      //     stroke: new StrokeStyle({
      //       color: 'blue',
      //       lineDash: [4],
      //       width: 3,
      //     }),
      //     fill: new FillStyle({
      //       color: 'rgba(0, 0, 255, 0.1)',
      //     }),
      //   }),
      //   'GeometryCollection': new Style({
      //     stroke: new StrokeStyle({
      //       color: 'magenta',
      //       width: 2,
      //     }),
      //     fill: new FillStyle({
      //       color: 'magenta',
      //     }),
      //   }),
      //   'Circle': new Style({
      //     stroke: new StrokeStyle({
      //       color: 'red',
      //       width: 2,
      //     }),
      //     fill: new FillStyle({
      //       color: 'rgba(255,0,0,0.2)',
      //     }),
      //   }),
      // };

      // const styleFunction = function (feature) {
      //   return styles[feature.getGeometry().getType()];
      // }; 

      // const geojsonObject = {
      //   'type': 'FeatureCollection',
      //   'crs': {
      //     'type': 'name',
      //     'properties': {
      //       'name': 'EPSG:3857',
      //     },
      //   },
      //   'features': [ 
      //     {
      //       'type': 'Feature',
      //       'geometry': {
      //         'type': 'LineString',
      //         'coordinates': [
      //           [0, 0],
      //           [20, 20],
      //         ],
      //       },
      //     },  
      //   ],
      // };

      // const vectorSource1 = new VectorSource({
      //   features: new GeoJSON().readFeatures(geojsonObject),
      // });
      // console.log(vectorSource1) 
      // const vectorSource = new VectorSource({
      //   features: this.features
      // }); 

      // const vectorLayer = new VectorLayer1({
      //   source: vectorSource,
      //   style: styleFunction,
      // });
      // console.log(vectorLayer) 
    }
  }

}
</script>

<style>
body,
html {
  padding: 0;
  margin: 0;
}

.map-container {
  width: 100vw;
  height: 100vh;
}
</style>